<template>
	<view class="wapper">
		<view class="top">
			<view class="filter-con">
				<tmt-calendar pointColor="#3685E6" selectBg="#3685E6" actionColor="#333" unfoldBtnColor="#333"
					background="transparent" weekColor="#333" dayColor="#333" :defaultDate="defaultDate"
					:point-list="pointList" :show="true" @changeMonth="changeMonth" @changeDate="changeDate"
					v-if="showCalendar"></tmt-calendar>

			</view>


			<!-- https://blog.csdn.net/tutouxiaoge/article/details/123925939 -->
		</view>
		<view class="plan-con" v-if="currentList && currentList.length>0">
			<view class="plan-title">
				当日排班
			</view>

			<view class="plan-list" v-for="(item,index) in currentList">
				<view class="plan-name">
					<view class="left-time">
						<image src="../static/image/time.png"></image>
						{{item.startTime}}-{{item.endTime}}
						<!-- <template v-if="item.scheduleType===1">
						{{item.startTime}}-{{item.endTime}}
						</template>
						<template v-else>
							{{item.startTime}}-{{item.endTime}}
						</template> -->
					</view>
					<view class="right-time">{{item.scheduleDate}}</view>
				</view>
				<view class="plan-add">{{item.zoneName}}</view>


			</view>
		</view>
	 

	</view>
</template>

<script>
	import {
		queryMyScheduleListByMonth
	} from '@/api/team.js'

	export default {
		data() {
			return {
				showDate: false,
				showCalendar: false,
				currentDate: '',
				defaultDate: '',
				time: '',
				maxDate: '',
				pointList: [],
				list: [],
				currentList: []
			}
		},
		onLoad() {
			this.getNowFormatDate()
			this.getList()
		},
		onShow() {

		},
		created() {

		},

		methods: {
			openShow() {
				this.newDate = Number(new Date(this.time))
				this.showDate = true
			},
			cancel() {
				this.newDate = ''
				this.showDate = false
				this.newDate = Number(new Date(this.time))
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}

				return value;
			},

			getNowFormatDate() {
				let date = new Date(),
					seperator1 = '-', //格式分隔符
					year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					strDate = date.getDate() // 获取当前日(1-31)
				if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
				if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
				this.currentDate = year + seperator1 + month + seperator1 + strDate
				this.defaultDate = this.currentDate
				this.time = year + seperator1 + month
				// + seperator1 + strDate
				this.maxDate = new Date().getTime()
			},
			getCurrentData() {

				let newArr = []
				for (let m = 0; m < this.list.length; m++) {
					if (this.currentDate == this.list[m].scheduleDate) {
						newArr.push(this.list[m])
					}
				}
				this.currentList = [...newArr]

			},
			changeDate(date) {
				console.log(date, 'date')
				let seperator1 = '-'
				let year = date.year
				let month = date.month
				let strDate = date.day
				if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
				if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
				this.currentDate = year + seperator1 + month + seperator1 + strDate
				this.getCurrentData()
			},
			changeMonth(currentYearMonth) {
				this.showCalendar = false
				console.log(currentYearMonth, 'currentYearMonth')
				let seperator1 = '-'
				let {
					month,
					year
				} = currentYearMonth
				if (month >= 1 && month <= 9) {
					month = '0' + month
				} // 如果月份是个位数，在前面补0
				this.time = year + seperator1 + month
				this.defaultDate = this.time
				this.getList()
				this.currentDate = year + seperator1 + month + seperator1 + '01'
				this.getCurrentData()
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				queryMyScheduleListByMonth({
					yearMonth: this.time
				}).then(res => {
					const {
						data
					} = res
					if (data && data.length > 0) {
						for (let i = 0; i < data.length; i++) {
							this.pointList.push(data[i].scheduleDate)
						}
						console.log(this.pointList, 'this.pointList')
						this.list = [...data]
						this.getCurrentData()

					}
					this.showCalendar = true

				}).finally(() => {
					uni.hideLoading()
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		min-height: 100vh;
		background: #F5F7F9;

		.top {
			background: #3E8EF0;
			width: 100vw;
			min-height: 100rpx;

			.filter-con {

				background: #FFFFFF;
				border-radius: 64rpx 64rpx 0 0;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 20rpx;


			}

		}

		.plan-con {
			padding: 40rpx 30rpx;

			.plan-title {
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #323232;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}

			.plan-list {
				padding: 26rpx 30rpx;
				background: #fff;
				margin-bottom: 20rpx;
				border-radius: 14rpx;


				.plan-name {
					display: flex;
					justify-content: space-between;
					margin-bottom: 16rpx;

					.left-time {
						font-size: 32rpx;
						font-weight: 500;
						color: #323232;
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}

					.right-time {
						font-size: 24rpx;
						font-weight: 400;
						color: #909399;
					}
				}

				.plan-add {
					font-size: 28rpx;
					font-weight: 400;
					color: #323232;
				}
			}

		}

	}
</style>
